<template>
	<div id="contentBox">
		<div class="searchBox">
			<el-form :inline="true"  ref="searchForm"  :model="searchForm" label-width="96px" style="margin-left:20px;">
	            <el-form-item label="汽车品牌" prop="carBrandName" style="    margin-bottom: 0;" >
				    <el-input v-model="searchForm.carBrandName" placeholder="请输入搜索内容..." @input.native="seachData"></el-input >
				</el-form-item>
				<el-form-item label="汽车子品牌" prop="carSubBrandName"  >
				    <el-input v-model="searchForm.carSubBrandName" placeholder="请输入搜索内容..." @input.native="seachData"></el-input >
				</el-form-item>
				<el-form-item label="汽车车系" prop="carSeriesName"  >
				     <el-input v-model="searchForm.carSeriesName" placeholder="请输入搜索内容..." @input.native="seachData"></el-input >
				</el-form-item>
				<el-form-item label="汽车车型" prop="name"  >
				     <el-input v-model="searchForm.name" placeholder="请输入搜索内容..." @input.native="seachData"></el-input >
				</el-form-item>
				<el-form-item label="启停状态" prop="enable" >
				    <el-select v-model="searchForm.enable"  placeholder="请选择状态" @change="seachData">
				    	<el-option label="全部" value=""></el-option>
				    	<el-option label="启用" value="true"></el-option>
				    	<el-option label="停用" value="false"></el-option>		     
					</el-select>
				</el-form-item>
				<el-form-item label="操作人" prop="createrName" >
				    <el-input v-model="searchForm.createrName" placeholder="请输入搜索内容..." @input.native="seachData"></el-input >
				</el-form-item>
				<el-form-item label="操作日期起" prop="startDate" >
				    <el-date-picker :editable="false"   
				      @change="seachData"
				      v-model="searchForm.startDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="startDateOpt"
				      format="yyyy-MM-dd"
				      >
				    </el-date-picker>
				</el-form-item>
				<el-form-item label="操作日期止" prop="endDate" >
				    <el-date-picker :editable="false"  
				      @change="seachData"
				      v-model="searchForm.endDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="endDateOpt"
				      >
				    </el-date-picker>
				</el-form-item>
				<el-form-item style="width:100%!important; text-align:center;margin-bottom: 10px;">
				    <el-button @click="resetSearchForm('searchForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="tableBox" style="margin:25px 25px 0" >
			<el-table :data="tableData.data" border  >
			    <el-table-column label="汽车品牌名称" min-width="120">
			      <template scope="scope">
			        <span >{{ scope.row.carBrandName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="汽车子品牌名称" min-width="120">
			      <template scope="scope">
			        <span >{{ scope.row.carSubBrandName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="汽车车系名称" min-width="120">
			      <template scope="scope">
			        <span >{{ scope.row.carSeriesName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="汽车车型名称" min-width="200">
			      <template scope="scope">
			        <span >{{ scope.row.name }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="汽车车规名称" min-width="200">
			      <template scope="scope">
			        <span >{{ scope.row.carSpecificationName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="指导价(万)" width="120">
			      <template scope="scope">
			        <span >{{ scope.row.price|toWFixed2 }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作人" width="80">
			      <template scope="scope">
			        <span >{{ scope.row.createrName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作时间" width="160">
			      <template scope="scope">
			        <span >{{ scope.row.createTime | parseTime }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="启用状态" width="100">
			      <template scope="scope">
			        <span >{{ scope.row.enable|flagBool(scope.row.enable)}}</span>
			      </template>
			    </el-table-column>
			    <!-- <el-table-column label="备注" >
			    			      <template scope="scope">
			    			        <span >{{ scope.row.remark }}</span>
			    			      </template>
			    			    </el-table-column> -->			    
			    <el-table-column label="操作" width="180">
			      <template scope="scope">
			        <el-button size="small" @click="handleEdit(scope.$index, scope.row )" v-if="allButton||updateButton">编辑</el-button>
			        <el-button size="small" @click="handleSee(scope.$index, scope.row )" v-if="allButton||viewButton">查看</el-button>
			        <el-button size="small" :type="toggle_button_types(scope.row.enable)" @click="handleDisabled(scope.$index, scope.row)" :ref="'flag'+scope.$index" v-if="allButton||disableButton">{{scope.row.enable|flagBoolF}}</el-button>
			      </template>
			    </el-table-column>
			</el-table>
			<el-dialog title="汽车车型管理" v-if="dialogSendData.dialogFormVisible" :visible.sync="dialogSendData.dialogFormVisible" :lock-scroll='false' top=10% :close-on-click-modal="false" :closeOnPressEscape="false">
                <dialogForm :dialogSendData="dialogSendData" :tableData="tableData" v-on:refreshTableData="seachData()"></dialogForm>
			</el-dialog>
		</div>
        <div class="block" style="text-align: center;margin-top: 15px;position:relative;">
		    <pagination v-on:refreshSeachData="seachData()"  :tableData="tableData" :searchForm="searchForm"></pagination>
		    <el-button  style="position:absolute;right:25px;top:0;" type="primary" @click="handleEdit()" v-if="allButton||addButton">添加汽车车型</el-button>
		</div>
		
	</div>
	
</template>
<script src="./index.js"></script>
<style scoped lang="stylus">
	@import "./index.styl"
</style>